import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Tabs } from 'antd';
import 'moment/locale/zh-cn';
import { ContentPackage } from '../../../comps';
import styles from './index.less';
import dictionaryConfig from '../../../utils/dictionaryConfig';
import StockInfo from './BasicInfo';
import BondInfo from './bondInfo';
// 因债券不改动，股票改动较多 所以拆开组件
const { TabPane } = Tabs;

@connect(({ portfolioOptimizationM, loading }) => ({
  portfolioOptimizationM,
  loading,
}))
@Form.create()
export default class PortfolioOptimization extends PureComponent {
  state = {
    timeOutGap: 500,
    currentPage: 1, // news当前页码
    numInPage: 10, // 每页数量
    tabType: '1', // 当前tab值
  };

  componentDidMount() {}

  componentWillUnmount() {
    // 离开前清除models数据
    this.props.dispatch({
      type: 'portfolioOptimizationM/setState',
      payload: {
        isShowTitle: true,
      },
    });
  }

  render() {
    const { isShowTitle } = this.props.portfolioOptimizationM;
    const initComp = (key) => {
      if (key === '0') return <StockInfo type={key} />;
      if (key === '1') return <BondInfo type={key} />;
      if (key === '2') return <a>{key}</a>;
      if (key === '3') return <a>{key}</a>;
    };
    return (
      <ContentPackage
        title={isShowTitle ? '组合优化' : ''}
        contentHtml={
          <div className={styles.portfolioOptimization}>
            <Tabs
              onChange={(val) => {
                this.setState({ tabType: val });
              }}
            >
              {dictionaryConfig.assetType.map((item) => {
                return (
                  <TabPane tab={item.title} key={item.key}>
                    {initComp(item.key)}
                  </TabPane>
                );
              })}
            </Tabs>
          </div>
        }
      />
    );
  }
}
